<template>
  <div id="live-nursing-service">
    <van-nav-bar title="住养服务" left-arrow @click-left="onClickLeft" fixed />
    <van-search v-model="value" show-action placeholder="请输入搜索关键词" @search="onSearch">
      <div slot="action" @click="onSearch" style="color:#666">搜索</div>
    </van-search>
    <div>
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-pull-refresh 
          v-model="isLoading"
          success-text="刷新成功"
          @refresh="onRefresh">
          <van-cell v-for="item in nursingList" :key="item.id">
            <van-card style="background:#FFFFFF">
              <span slot="thumb" class="file-img">
                <img :src="item.images" alt />
              </span>
              <div slot="desc" class="file-text">
                <div class="file-name">
                  <span>{{item.name}}</span>
                </div>
                <div class="file-tel">
                  <van-icon name="phone-o" />
                  <span>电话：{{item.contactInfo}}</span>
                </div>
                <div class="file-address">住址：{{item.address}}</div>
              </div>
            </van-card>
          </van-cell>
        </van-pull-refresh>
      </van-list>
    </div>
  </div>
</template>
<script>
import api from "@/controller/agedService.js";
import constant from "@/controller/constant.js";
export default {
  name: "liveNursingService",
  data() {
    return {
      value: "",
      loading: false,
      finished: false,
      isLoading: false,
      curPage: 1,
      pageSize: 10,
      nursingList: []
    };
  },
  mounted() {
    this.getNurseList()
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    // 搜索查询住养列表
    onSearch() {
      this.nursingList = []
      this.curPage = 1
      this.finished = false
      setTimeout(() => {
        this.getNurseList()
      }, 500)
    },
    // 获取住养列表
    getNurseList() {
      const data = {
        curPage: this.curPage,
        name: this.value,
        pageSize: this.pageSize
      }
      const _self = this
      api
        .pensionHousing_v1_search(data)
        .then(res => {
        if(res.code == 0) {
          if(
              res.datas ==  null ||
              res.datas.records == null ||
              res.datas.records.length === 0
              ) {
            // console.log(333)
            // _self.$toast('暂无更多数据')
            _self.loading = false
            _self.isLoading = false
            _self.finished = true
            return
          }
          this.$nextTick(() => {
            _self.loading = false
            _self.isLoading = false
          })
          if (res.datas.records.length < this.pageSize) {
            _self.finished = true
          } 
           
            _self.nursingList = [..._self.nursingList, ...res.datas.records]
        }
      })
      .catch(() =>{
        this.$toast(constant.netErrMsg);
      }) 
    },
    // 下拉刷新
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
        this.curPage += 1
        this.getNurseList();
      }, 500) 
    },
    // 下滑加载
    onLoad() {
      this.isLoading = false;
      this.onRefresh();
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../styles/searchStyle.scss";
</style>
<style lang="scss" scoped>
#live-nursing-service {
  .van-cell {
    padding: 0;
  }
  .van-card {
    padding: 20px;
    border-bottom: 0.5px solid #e2e2e2;
    .van-card__thumb {
      width: 60px;
      height: 60px;
    }
    .van-card__content {
      min-height: 0;
    }
  }
  .van-list {
    min-height: calc(100vh - 99px);
    background: #ffffff;
  }
  .file-img {
    width: 60px;
    height: 60px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .file-text {
    margin-left: 12px;
    display: inline-block;
    .file-name {
      font-family: PingFangSC-Medium;
      font-size: 14px;
      color: #333333;
      letter-spacing: 0;
      line-height: 20px;
      font-weight: bolder;
    }
    .file-tel,
    .file-address {
      font-family: PingFangSC-Regular;
      font-size: 12px;
      color: #666666;
      letter-spacing: 0;
      margin-top: 3.5px;
      line-height: 16.5px;
      i {
        font-size: 15px;
        line-height: 16.5px;
        position: absolute;
        top: 24.5px;
        left: 12px;
      }
      span {
        margin-left: 20.5px;
      }
    }
  }
}
</style>